import React, {JSX} from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';
import {Card} from '../../../kit/Card';
import {BasicText} from '../../../kit/text';
import {OpenToRightIcon} from '../../../kit/icon';
import {Tag} from '../../../kit/Tag';
import { normalize } from '../../../utils/adapter';

type CurNumberItemViewProps = {
  value: number;
  onPress?:()=>void
};

const CurNumberItemView = React.memo(({value}: CurNumberItemViewProps) => {
  return (
    <View style={{flex: 1}}>
      <View style={[{flexDirection: 'row', alignItems: 'center'}]}>
        <BasicText color="#333" fontSize={normalize(14)}>
          当前红包
        </BasicText>
        <View style={{transform: [{translateY: 1}]}}>
          <OpenToRightIcon size={'14'} />
        </View>
      </View>
      <View style={styles.cur_number_item_value}>
        <BasicText color="#333" fontSize={normalize(24)}>
          {value}
        </BasicText>
      </View>
    </View>
  );
});

const FirstRowView = React.memo(() => {
  return (
    <View style={styles.cur_number_item_container}>
      <CurNumberItemView value={13545} />
      <CurNumberItemView value={135.54} />
    </View>
  );
});

const BonusNotification = React.memo(() => {
  return (
    <View style={styles.bonus}>
      <Tag fontSize={normalize(10)} color="#FF685A">
        {'福利'}
      </Tag>
      <View style={styles.text}>
        <BasicText color="#000" fontSize={normalize(12)} fontWeight={'medium'}>
          {'领取我的今日专属福利'}
        </BasicText>
      </View>
    </View>
  );
});

function AccountFinancial({onPress}:{onPress:()=>void}): JSX.Element {
  return (
    <Card Y={-80}>
      <View style={styles.account_container}>
        <FirstRowView />
        <TouchableOpacity style={styles.withdraw_btn} onPress={onPress}>
          <BasicText>{'立即提现'}</BasicText>
        </TouchableOpacity>
        <BonusNotification />
      </View>
    </Card>
  );
}

const styles = StyleSheet.create({
  account_container: {
    paddingHorizontal: normalize(30),
    paddingVertical: normalize(20),
  },
  cur_number_item_container: {
    flexDirection: 'row',
  },
  cur_number_item_value: {
    marginTop: normalize(12),
  },
  withdraw_btn: {
    height: normalize(40),
    backgroundColor: '#FF685A',
    borderRadius: normalize(26),
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: normalize(15),
  },
  bonus: {
    backgroundColor: '#F6F6F6',
    borderRadius: normalize(8),
    marginTop: normalize(12),
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: normalize(12),
    paddingVertical: normalize(7),
  },
  text:{
    marginLeft:normalize(8),
  },
});

export default AccountFinancial;
